<template>
  <div class="footer-form">

    <el-form label-position="top"  ref="ruleFormRef" :model="tableValues" status-icon :rules="rules"  label-width="120px"
      class="demo-ruleForm">
      <div class='title-box'>
        温度阶段
      </div>
      <div class='flex justify-between'>
        <div>
          <el-form-item label='1阶段末（36末）' prop="one.step1">
            <el-input  spellcheck="false"   v-model="tableValues.one.step1"   placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step1')"  show-word-limit clearable  />
          </el-form-item>
        </div>


         <div>
          <el-form-item label='2阶段末（38末）七成黄' required prop="one.step2">
            <el-input  spellcheck="false"   v-model="tableValues.one.step2"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step2')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='3阶段末（40末）八成黄' required prop="one.step3">
            <el-input  spellcheck="false"   v-model="tableValues.one.step3"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step3')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='4阶段末（42末）九成黄' required prop="one.step4">
            <el-input  spellcheck="false"   v-model="tableValues.one.step4"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step4')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='5阶段末（44末）' required prop="one.step5">
            <el-input  spellcheck="false"   v-model="tableValues.one.step5"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step5')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='6阶段末（47末）' required prop="one.step6">
            <el-input  spellcheck="false"   v-model="tableValues.one.step6"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step6')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='7阶段末（50末）' required prop="one.step7">
            <el-input  spellcheck="false"   v-model="tableValues.one.step7"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step7')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='8阶段末（54末）' required prop="one.step8">
            <el-input  spellcheck="false"   v-model="tableValues.one.step8"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step8')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='9阶段末（60末）' required prop="one.step9">
            <el-input  spellcheck="false"   v-model="tableValues.one.step9"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step9')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='10阶段末（65末）' required prop="one.step10">
            <el-input  spellcheck="false"   v-model="tableValues.one.step10"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('one', 'step10')"  show-word-limit clearable  />
          </el-form-item>
        </div>
      </div>


      <div class='title-box'>
        湿度阶段
      </div>

  <div class='flex justify-between'>
        <div>
        </div>
        <div>
          <el-form-item label='叶片发软' required prop="two.step2">
            <el-input  spellcheck="false"   v-model="tableValues.two.step2"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step2')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='主筋发软' required prop="two.step3">
            <el-input  spellcheck="false"   v-model="tableValues.two.step3"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step3')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='充分塌架' required prop="two.step4">
            <el-input  spellcheck="false"   v-model="tableValues.two.step4"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step4')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='勾尖卷边' required prop="two.step5">
            <el-input  spellcheck="false"   v-model="tableValues.two.step5"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step5')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='支脉半干' required prop="two.step6">
            <el-input  spellcheck="false"   v-model="tableValues.two.step6"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step6')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
          <el-form-item label='支脉干燥' required prop="two.step7">
            <el-input  spellcheck="false"   v-model="tableValues.two.step7"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step7')"  show-word-limit clearable  />
          </el-form-item>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
          <el-form-item label='干筋' required prop="two.step10">
            <el-input  spellcheck="false"   v-model="tableValues.two.step10"  placeholder='' :rows="2"
    type="textarea" @focus="handlePaste('two', 'step10')"  show-word-limit clearable  />
          </el-form-item>
        </div>
      </div>

      <div class='title-box'>
        其他
      </div>

       <div class="flex justify-start">
        <el-form-item label='烟叶品种' required prop="three.variety">
          <el-input  spellcheck="false"    v-model="tableValues.three.variety" placeholder=''  show-word-limit clearable  />
        </el-form-item>

        <el-form-item label='生长部位' required prop="three.position">
          <el-select v-model="tableValues.three.position" placeholder="生长部位">
            <el-option v-for="(item, index) of options" :key="index" :label="item" :value="item"  />
          </el-select>
        </el-form-item>

        <el-form-item label='成熟度' required  prop="three.process">

          <el-select v-model="tableValues.three.process" placeholder="成熟度">
            <el-option v-for="(item, index) of options1" :key="index" :label="item" :value="item"  />
          </el-select>
        </el-form-item>

        <el-form-item label='备注'>
          <el-input  spellcheck="false"  input-style="width: 600px"   type="textarea" v-model="tableValues.three.remark" placeholder=''  show-word-limit clearable ></el-input >
        </el-form-item>
      </div>

      <div class='export-box'>
        <el-button  type='primary' @click="handleExportExcel">导出</el-button>
      </div>

    </el-form>
  </div>




</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
const ruleFormRef = ref<FormInstance>()
import { ElMessage, ElMessageBox } from 'element-plus'
import { createExcel } from "@/utils/excelFunc.ts";
import { storage } from '@/utils/index.ts';

const tableValues = reactive({
  one: {
  step1: '',
  step2: '',
  step3: '',
  step4: '',
  step5: '',
  step6: '',
  step7: '',
  step8: '',
  step9: '',
  step10: '',
}, two: {
  step2: '',
  step3: '',
  step4: '',
  step5: '',
  step6: '',
  step7: '',
  step10: '',
}, three: {
  variety: '',
  position: '',
  process: '',
  remark: ''
} })


const options = ['上部', '中部', '下部', '不确定'];
const options1 = ['不熟', '尚熟', '成熟', '过熟'];


const rules = reactive({
    "one.step1": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step2": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step3": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step4": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step5": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step6": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step7": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step8": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step9": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "one.step10": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    
    
    "two.step2": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "two.step3": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "two.step4": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "two.step5": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "two.step6": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "two.step7": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "two.step10": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],

    "three.variety": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "three.position": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "three.process": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],
    "three.remark": [ { required: true, message: '请填写', trigger: ['blur', 'change', 'focus']}],

  })


// 粘贴功能
const handlePaste = (key1, key2) => {
  if (tableValues[key1][key2]) return
  navigator.clipboard.readText().then((pastedData) => {
    // 在这里处理剪贴板中的文本内容
    // event.target.value = pastedData
    tableValues[key1][key2] = pastedData
  }).catch((error) => {
    console.error('无法读取剪贴板内容:', error);
  });
};


const handleExportExcel = async () => {
  
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })

  ElMessageBox.confirm(
    '是否开始导出?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '正在导出',
      })

      confirmBtn()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消导出',
      })
    })
}

  let flag = false
  function confirmBtn () {
        console.log(123312331)
      flag = true

      // setOutputBtnDisabled(true)

      const resultPath = storage.get('resultPath')
      console.log(22222333444, tableValues)
      createExcel(resultPath, tableValues, resultPath)
      setTimeout(() => {
        // setOutputBtnDisabled(false);

        flag = false
      }, 3000);
  }




</script>

<style scope>
@import "./EditForm.css"
</style>